<template>
  <div class="video-detection">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>AI视频检测</h1>
      <p>专业的Deepfake和AI生成视频识别</p>
    </div>

    <!-- 上传区域 -->
    <div class="upload-section">
      <div class="upload-area" @dragover.prevent @drop="handleDrop">
        <div class="upload-icon">🎬</div>
        <h3>上传视频进行检测</h3>
        <p>支持 MP4, AVI, MOV 格式，最大 100MB</p>
        <input 
          ref="fileInput" 
          type="file" 
          accept="video/*" 
          @change="handleFileUpload"
          style="display: none;"
        />
        <button class="upload-btn" @click="$refs.fileInput.click()">
          选择视频
        </button>
      </div>
    </div>

    <!-- 视频预览和分析 -->
    <div v-if="currentVideo" class="video-section">
      <div class="video-container">
        <div class="video-player">
          <video 
            ref="videoPlayer" 
            :src="currentVideo.url" 
            controls 
            @loadeddata="onVideoLoaded"
            @timeupdate="onTimeUpdate"
          ></video>
          
          <div class="video-controls">
            <button @click="togglePlayPause" class="control-btn">
              {{ isPlaying ? '⏸️' : '▶️' }}
            </button>
            <div class="time-display">
              {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
            </div>
            <div class="playback-speed">
              <select v-model="playbackSpeed" @change="changePlaybackSpeed">
                <option value="0.5">0.5x</option>
                <option value="1">1x</option>
                <option value="1.5">1.5x</option>
                <option value="2">2x</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="video-info">
          <h3>视频信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">文件名：</span>
              <span class="value">{{ currentVideo.name }}</span>
            </div>
            <div class="info-item">
              <span class="label">大小：</span>
              <span class="value">{{ formatFileSize(currentVideo.size) }}</span>
            </div>
            <div class="info-item">
              <span class="label">时长：</span>
              <span class="value">{{ formatTime(duration) }}</span>
            </div>
            <div class="info-item">
              <span class="label">分辨率：</span>
              <span class="value">{{ videoResolution }}</span>
            </div>
            <div class="info-item">
              <span class="label">帧率：</span>
              <span class="value">{{ frameRate }} fps</span>
            </div>
          </div>
          
          <div class="detection-actions">
            <button 
              class="analyze-btn" 
              @click="startAnalysis"
              :disabled="isAnalyzing"
            >
              {{ isAnalyzing ? '分析中...' : '开始分析' }}
            </button>
            <button class="quick-scan-btn" @click="quickScan">
              快速扫描
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分析结果 -->
    <div v-if="analysisResult" class="analysis-section">
      <div class="result-header">
        <h2>检测结果</h2>
        <div class="overall-score">
          <div class="score-circle" :class="getScoreClass(analysisResult.overallScore)">
            {{ analysisResult.overallScore }}%
          </div>
          <div class="score-label">AI生成概率</div>
        </div>
      </div>
      
      <div class="analysis-tabs">
        <button 
          v-for="tab in analysisTabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ active: activeAnalysisTab === tab.id }"
          @click="activeAnalysisTab = tab.id"
        >
          {{ tab.label }}
        </button>
      </div>
      
      <div class="analysis-content">
        <!-- 时间线分析 -->
        <div v-if="activeAnalysisTab === 'timeline'" class="timeline-analysis">
          <h3>时间线分析</h3>
          <div class="timeline-container">
            <div class="timeline-track">
              <div 
                v-for="segment in analysisResult.timelineSegments" 
                :key="segment.id"
                class="timeline-segment"
                :class="segment.riskLevel"
                :style="{ 
                  left: (segment.startTime / duration) * 100 + '%',
                  width: ((segment.endTime - segment.startTime) / duration) * 100 + '%'
                }"
                @click="seekToTime(segment.startTime)"
              >
                <div class="segment-tooltip">
                  {{ formatTime(segment.startTime) }} - {{ formatTime(segment.endTime) }}
                  <br>
                  可疑度: {{ segment.suspiciousLevel }}%
                </div>
              </div>
            </div>
          </div>
          
          <div class="timeline-legend">
            <div class="legend-item">
              <div class="legend-color low"></div>
              <span>低风险</span>
            </div>
            <div class="legend-item">
              <div class="legend-color medium"></div>
              <span>中风险</span>
            </div>
            <div class="legend-item">
              <div class="legend-color high"></div>
              <span>高风险</span>
            </div>
          </div>
        </div>
        
        <!-- 帧分析 -->
        <div v-if="activeAnalysisTab === 'frames'" class="frame-analysis">
          <h3>关键帧分析</h3>
          <div class="frames-grid">
            <div 
              v-for="frame in analysisResult.keyFrames" 
              :key="frame.id"
              class="frame-card"
              @click="seekToTime(frame.timestamp)"
            >
              <div class="frame-preview">
                <img :src="frame.thumbnail" alt="关键帧" />
                <div class="frame-overlay">
                  <div class="frame-time">{{ formatTime(frame.timestamp) }}</div>
                  <div class="frame-score" :class="getScoreClass(frame.score)">
                    {{ frame.score }}%
                  </div>
                </div>
              </div>
              <div class="frame-details">
                <h4>{{ frame.type }}</h4>
                <p>{{ frame.description }}</p>
                <div class="frame-metrics">
                  <div class="metric">
                    <span class="metric-label">面部一致性：</span>
                    <span class="metric-value">{{ frame.faceConsistency }}%</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">表情自然度：</span>
                    <span class="metric-value">{{ frame.expressionNaturalness }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 技术分析 -->
        <div v-if="activeAnalysisTab === 'technical'" class="technical-analysis">
          <h3>技术分析</h3>
          <div class="technical-metrics">
            <div class="metric-group">
              <h4>图像质量分析</h4>
              <div class="metric-item">
                <span class="metric-label">压缩伪影：</span>
                <div class="metric-bar">
                  <div class="metric-fill" :style="{ width: analysisResult.compressionArtifacts + '%' }"></div>
                </div>
                <span class="metric-value">{{ analysisResult.compressionArtifacts }}%</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">时间一致性：</span>
                <div class="metric-bar">
                  <div class="metric-fill" :style="{ width: analysisResult.temporalConsistency + '%' }"></div>
                </div>
                <span class="metric-value">{{ analysisResult.temporalConsistency }}%</span>
              </div>
            </div>
            
            <div class="metric-group">
              <h4>面部特征分析</h4>
              <div class="metric-item">
                <span class="metric-label">面部跟踪：</span>
                <div class="metric-bar">
                  <div class="metric-fill" :style="{ width: analysisResult.faceTracking + '%' }"></div>
                </div>
                <span class="metric-value">{{ analysisResult.faceTracking }}%</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">眼部自然度：</span>
                <div class="metric-bar">
                  <div class="metric-fill" :style="{ width: analysisResult.eyeNaturalness + '%' }"></div>
                </div>
                <span class="metric-value">{{ analysisResult.eyeNaturalness }}%</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 警告信号 -->
        <div v-if="activeAnalysisTab === 'warnings'" class="warnings-analysis">
          <h3>检测到的异常信号</h3>
          <div class="warnings-list">
            <div 
              v-for="warning in analysisResult.warnings" 
              :key="warning.id"
              class="warning-item"
              :class="warning.severity"
            >
              <div class="warning-icon">{{ warning.icon }}</div>
              <div class="warning-content">
                <h4>{{ warning.title }}</h4>
                <p>{{ warning.description }}</p>
                <div class="warning-location">
                  <span class="location-label">位置：</span>
                  <span class="location-value">{{ formatTime(warning.timestamp) }}</span>
                  <button class="goto-btn" @click="seekToTime(warning.timestamp)">
                    跳转
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 检测历史 -->
    <div class="history-section">
      <h2>检测历史</h2>
      <div class="history-grid">
        <div 
          v-for="record in detectionHistory" 
          :key="record.id"
          class="history-card"
        >
          <div class="history-preview">
            <video :src="record.videoUrl" class="history-video"></video>
            <div class="history-overlay">
              <div class="history-result" :class="record.resultType">
                {{ record.score }}%
              </div>
            </div>
          </div>
          <div class="history-info">
            <h4>{{ record.name }}</h4>
            <p>{{ record.date }}</p>
            <div class="history-actions">
              <button class="reanalyze-btn" @click="reanalyze(record)">
                重新分析
              </button>
              <button class="delete-btn" @click="deleteRecord(record.id)">
                删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const currentVideo = ref(null)
const videoPlayer = ref(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const playbackSpeed = ref(1)
const videoResolution = ref('1920x1080')
const frameRate = ref(30)
const isAnalyzing = ref(false)
const analysisResult = ref(null)
const activeAnalysisTab = ref('timeline')

// 分析标签页
const analysisTabs = [
  { id: 'timeline', label: '时间线分析' },
  { id: 'frames', label: '关键帧分析' },
  { id: 'technical', label: '技术分析' },
  { id: 'warnings', label: '异常警告' }
]

// 检测历史
const detectionHistory = ref([
  {
    id: 1,
    name: '采访视频.mp4',
    date: '2024-01-15 14:30',
    videoUrl: 'data:video/mp4;base64,',
    resultType: 'suspicious',
    score: 85
  },
  {
    id: 2,
    name: '演讲录像.mov',
    date: '2024-01-15 14:25',
    videoUrl: 'data:video/mp4;base64,',
    resultType: 'normal',
    score: 23
  }
])

// 方法
const handleDrop = (e) => {
  e.preventDefault()
  const files = Array.from(e.dataTransfer.files)
  processFile(files[0])
}

const handleFileUpload = (e) => {
  const file = e.target.files[0]
  if (file) {
    processFile(file)
  }
}

const processFile = (file) => {
  if (file.type.startsWith('video/')) {
    const url = URL.createObjectURL(file)
    currentVideo.value = {
      name: file.name,
      size: file.size,
      url: url
    }
    
    // 重置分析结果
    analysisResult.value = null
    isAnalyzing.value = false
  }
}

const onVideoLoaded = () => {
  duration.value = videoPlayer.value.duration
}

const onTimeUpdate = () => {
  currentTime.value = videoPlayer.value.currentTime
}

const togglePlayPause = () => {
  if (isPlaying.value) {
    videoPlayer.value.pause()
  } else {
    videoPlayer.value.play()
  }
  isPlaying.value = !isPlaying.value
}

const changePlaybackSpeed = () => {
  videoPlayer.value.playbackRate = playbackSpeed.value
}

const seekToTime = (time) => {
  videoPlayer.value.currentTime = time
}

const startAnalysis = async () => {
  isAnalyzing.value = true
  
  // 模拟分析过程
  await new Promise(resolve => setTimeout(resolve, 3000))
  
  // 生成模拟分析结果
  analysisResult.value = {
    overallScore: Math.floor(Math.random() * 40) + 60,
    compressionArtifacts: Math.floor(Math.random() * 30) + 70,
    temporalConsistency: Math.floor(Math.random() * 40) + 60,
    faceTracking: Math.floor(Math.random() * 35) + 65,
    eyeNaturalness: Math.floor(Math.random() * 45) + 55,
    timelineSegments: [
      {
        id: 1,
        startTime: 0,
        endTime: 5,
        riskLevel: 'low',
        suspiciousLevel: 15
      },
      {
        id: 2,
        startTime: 5,
        endTime: 12,
        riskLevel: 'high',
        suspiciousLevel: 85
      },
      {
        id: 3,
        startTime: 12,
        endTime: 20,
        riskLevel: 'medium',
        suspiciousLevel: 45
      }
    ],
    keyFrames: [
      {
        id: 1,
        timestamp: 2.5,
        type: '面部特写',
        description: '检测到面部区域异常',
        score: 78,
        faceConsistency: 65,
        expressionNaturalness: 72,
        thumbnail: ''
      },
      {
        id: 2,
        timestamp: 8.3,
        type: '表情变化',
        description: '表情切换不自然',
        score: 92,
        faceConsistency: 45,
        expressionNaturalness: 38,
        thumbnail: ''
      }
    ],
    warnings: [
      {
        id: 1,
        title: '面部边界模糊',
        description: '检测到面部边界存在不自然的模糊效果',
        severity: 'high',
        timestamp: 8.5,
        icon: '⚠️'
      },
      {
        id: 2,
        title: '眼部闪烁异常',
        description: '眼部眨眼频率和模式异常',
        severity: 'medium',
        timestamp: 15.2,
        icon: '👁️'
      }
    ]
  }
  
  isAnalyzing.value = false
  activeAnalysisTab.value = 'timeline'
}

const quickScan = async () => {
  // 快速扫描功能
  isAnalyzing.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  // 生成简化的分析结果
  analysisResult.value = {
    overallScore: Math.floor(Math.random() * 30) + 40,
    // 简化的其他数据...
  }
  
  isAnalyzing.value = false
}

const getScoreClass = (score) => {
  if (score >= 70) return 'high'
  if (score >= 40) return 'medium'
  return 'low'
}

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const reanalyze = (record) => {
  console.log('重新分析:', record)
}

const deleteRecord = (id) => {
  const index = detectionHistory.value.findIndex(record => record.id === id)
  if (index > -1) {
    detectionHistory.value.splice(index, 1)
  }
}

// 生命周期
onMounted(() => {
  // 初始化
})

onUnmounted(() => {
  // 清理资源
  if (currentVideo.value) {
    URL.revokeObjectURL(currentVideo.value.url)
  }
})
</script>

<style scoped>
.video-detection {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f8f9fa;
  min-height: 100vh;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .video-detection {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .video-detection {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .video-detection {
    width: 100%;
    padding: 10px;
  }
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5em;
  color: #1e3c72;
  margin-bottom: 10px;
}

.upload-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: #f8f9fa;
}

.upload-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.upload-btn {
  padding: 12px 30px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
}

.video-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.video-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.video-player {
  position: relative;
}

.video-player video {
  width: 100%;
  border-radius: 10px;
}

.video-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.control-btn {
  padding: 8px 16px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.time-display {
  color: #666;
  font-size: 14px;
}

.playback-speed select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.video-info h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.detection-actions {
  display: flex;
  gap: 10px;
}

.analyze-btn {
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.analyze-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.quick-scan-btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.analysis-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.overall-score {
  text-align: center;
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.score-circle.high {
  background: #dc3545;
}

.score-circle.medium {
  background: #ffc107;
}

.score-circle.low {
  background: #28a745;
}

.score-label {
  font-size: 0.9em;
  color: #666;
}

.analysis-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  border-color: #1e3c72;
}

.tab-btn.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.timeline-container {
  position: relative;
  height: 60px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 20px;
}

.timeline-track {
  position: relative;
  height: 100%;
}

.timeline-segment {
  position: absolute;
  top: 10px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.timeline-segment.low {
  background: #d4edda;
  border: 2px solid #28a745;
}

.timeline-segment.medium {
  background: #fff3cd;
  border: 2px solid #ffc107;
}

.timeline-segment.high {
  background: #f8d7da;
  border: 2px solid #dc3545;
}

.timeline-segment:hover {
  opacity: 0.8;
}

.segment-tooltip {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
}

.timeline-segment:hover .segment-tooltip {
  display: block;
}

.timeline-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.legend-color.low {
  background: #28a745;
}

.legend-color.medium {
  background: #ffc107;
}

.legend-color.high {
  background: #dc3545;
}

.frames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.frame-card {
  background: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.frame-card:hover {
  transform: translateY(-5px);
}

.frame-preview {
  position: relative;
  height: 160px;
}

.frame-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}

.frame-time {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.frame-score {
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.frame-score.high {
  background: #dc3545;
  color: white;
}

.frame-score.medium {
  background: #ffc107;
  color: black;
}

.frame-score.low {
  background: #28a745;
  color: white;
}

.frame-details {
  padding: 15px;
}

.frame-details h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.frame-details p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 14px;
}

.frame-metrics {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.metric {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.metric-label {
  color: #666;
}

.metric-value {
  color: #333;
  font-weight: 500;
}

.technical-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.metric-group h4 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.metric-label {
  width: 120px;
  font-size: 14px;
  color: #666;
}

.metric-bar {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  background: #1e3c72;
  transition: width 0.3s ease;
}

.metric-value {
  width: 50px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.warnings-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
}

.warning-item.high {
  background: #ffebee;
  border-left: 4px solid #dc3545;
}

.warning-item.medium {
  background: #fff3e0;
  border-left: 4px solid #ffc107;
}

.warning-icon {
  font-size: 1.5em;
  margin-top: 5px;
}

.warning-content {
  flex: 1;
}

.warning-content h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.warning-content p {
  margin: 0 0 10px 0;
  color: #666;
  line-height: 1.5;
}

.warning-location {
  display: flex;
  align-items: center;
  gap: 10px;
}

.location-label {
  color: #666;
  font-size: 14px;
}

.location-value {
  color: #333;
  font-weight: 500;
}

.goto-btn {
  padding: 4px 8px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.history-section {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.history-section h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.history-card {
  background: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
}

.history-preview {
  position: relative;
  height: 150px;
}

.history-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
}

.history-result {
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.history-result.suspicious {
  background: #dc3545;
}

.history-result.normal {
  background: #28a745;
}

.history-info {
  padding: 15px;
}

.history-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.history-info p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
}

.history-actions {
  display: flex;
  gap: 10px;
}

.reanalyze-btn {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.delete-btn {
  padding: 6px 12px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

@media (max-width: 768px) {
  .video-container {
    grid-template-columns: 1fr;
  }
  
  .technical-metrics {
    grid-template-columns: 1fr;
  }
  
  .history-grid {
    grid-template-columns: 1fr;
  }
  
  .video-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style> 